<template>
  <div>
    <el-dialog
      title="优惠卷统计"
      :visible.sync="dialogvisible"
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      :show-close="true"
      width="60%"
      :before-close="handleClose"
    >
      <el-form :model="queryParam" ref="queryParam" inline class="demo-form-inline">
        <el-form-item label="时间范围:" prop="timespan">
          <el-date-picker
            v-model="queryParam.timespan"
            type="daterange"
            unlink-panels
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
          <el-button type="primary" @click="resetForm('queryParam')">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="8">
          <label>共发送：</label>
          {{all}}
        </el-col>
        <el-col :span="8">
          <label>已使用：</label>
          {{use}}
        </el-col>
        <el-col :span="8">
          <label>已过期：</label>
          {{expire}}
        </el-col>
      </el-row>
      <div class="tableList">
        <el-table :data="list" border style="width: 100%">
          <el-table-column type="index" label="排序" width="50"></el-table-column>
          <el-table-column prop="avatarUrl" label="头像" width="100">
            <template slot-scope="scope">
              <img :src="scope.row.avatarUrl" width="80" height="80" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="tel" label="电话" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="orderNo" label="订单编号" width="180" show-overflow-tooltip></el-table-column>
          <el-table-column prop="status" label="订单状态" width="100" show-overflow-tooltip>
            <template slot-scope="scope">{{getStatus(scope.row.status)}}</template>
          </el-table-column>
          <el-table-column prop="paidDate" label="支付日期" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="amount" label="订单总额" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="couponOffAmount" label="优惠券抵消额" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="creditsOffAmount" label="积分抵消额" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="realAmount" label="实际支付额" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="carryAmount" label="订单运费" width="100" show-overflow-tooltip></el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="pageChange"
            :total="total"
            :current-page.sync="pageNum"
            :page-sizes="[10, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next"
          ></el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["visible"],
  watch: {
    visible: function() {
      let that = this;
      that.dialogvisible = this.visible;
    }
  },
  data() {
    return {
      // 分页参数
      pageNum: 1, // 当前页数
      pageSize: 10, // 页大小
      total: 0, // 数据总条数
      list: [], // 数据列表
      dialogvisible: false,
      buyNum: 0,
      id: null,
      type: null,
      queryParam: {
        timespan: []
      },
      id: null,
      all: 0,
      use: 0,
      expire: 0,
      statusList: []
    };
  },
  created() {
    this.$https.get("order/orderStatus").then(res => {
      this.statusList = res.data.data;
    });
  },
  computed: {},
  methods: {
    getStatus(status) {
      for (let i = 0; i < this.statusList.length; i++) {
        if (this.statusList[i].key == status) {
          return this.statusList[i].label;
        }
      }
      return "";
    },
    // 分页相关方法
    // 页大小改变时
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 页码改变时
    pageChange(e) {
      // 获取某页数据
      this.pageNum = e;
      this.getList();
    },
    initComponent(id) {
      this.id = id;
      this.pageNum = 1; // 当前页数
      this.pageSize = 10;
      this.getList();
    },
    // 获取列表数据
    getList(num, size) {
      let url = "/preferentialTicket/pagePreferentialTicketUseInfo";
      let startDate, endDate;
      if (this.queryParam.timespan && this.queryParam.timespan.length > 0) {
        startDate = this.queryParam.timespan[0];
        endDate = this.queryParam.timespan[1];
      }
      this.$https
        .get(url, {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          id: this.id,
          startDate: startDate,
          endDate: endDate
        })
        .then(res => {
          this.list = res.data.data.list;
          // 自定义下标
          this.list.forEach((e, idx) => {
            e.idx = (idx + 1) * this.pageNum;
          });

          this.total = Number.parseInt(res.data.data.total);
          this.pageNum = res.data.data.pageNum;
        });
      this.countDetail();
    },
    handleClose(done) {
      this.$emit("update:visible", false);
      done();
    },
    countDetail() {
      let url = "/preferentialTicket/getTicketSendInfo";
      this.$https
        .get(url, {
          id: this.id
        })
        .then(res => {
          if (res.data.data) {
            this.all = res.data.data.all;
            this.use = res.data.data.use;
            this.expire = res.data.data.expire;
          }
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      if (formName == "queryParam") {
        this.getList();
      }
    }
  }
};
</script>

<style lang="less">
</style>